import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { TouchableOpacity, View, Text } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

import styles from './Styles/SingleAddressStyle'

export default class SingleAddress extends Component {
  // Prop type warnings
  static propTypes = {
    data: PropTypes.object,
    navigation: PropTypes.object,
  }
  
  // Defaults for props
  static defaultProps = {
    data: null
  }

  _onPress = () => {
    if (this.props.navigation) {
      this.props.navigation.navigate('AddressScreen',{'choice':true})
    }
  }

  render () {
    if (!this.props.data) {
      return null
    }
    const address = this.props.data
    return (
      <TouchableOpacity
        onPress={this._onPress}
        activeOpacity={0.8}
        style={[styles.section, this.props.style]}>
        <View style={styles.innerBox}>
          <Icon name='map-marker' size={28} style={styles.icon} />
          <View style={{marginLeft:20}}>
            <Text style={styles.title}>
              {address.name}  {address.mobile}</Text>
            <Text style={styles.description}>
              {address.area} {address.address}</Text>
          </View>
        </View>
      </TouchableOpacity>
    )
  }
}
